import classNames from 'classnames'
import styles from './index.module.less'
import { Location } from '@nutui/icons-react-taro'

type CinemaCardPropsType = {
  data: Movie.CinemaItem
  onClick: (cinema: Movie.CinemaItem) => void
  showPrice?: boolean
  isCombination?: boolean
  commission?: React.ReactNode
}
function CinemaCard(props: CinemaCardPropsType) {
  const { data, showPrice, onClick, isCombination = false, commission } = props
  const { cinemaName, price, cinemaAddress, distance } = data
  return (
    <div className={styles.cinemaItem} onClick={() => onClick(data)}>
      <div className={styles.cinemaRow}>
        <div className={styles.title}>{cinemaName}</div>
        {showPrice 
          ? <div className={styles.price}>
            { commission || null}
            <span className={classNames(styles.priceText, styles.colorMain)}>{isCombination ? 0 : price}</span>
            <span className={styles.colorMain}>元</span>
            <span>起</span>
          </div>
          :  distance && <Location color="var(--color-main)" className={styles.positionIcon} />
        }
      </div>
      <div className={styles.cinemaRow}>
        <div className={styles.dec}>{cinemaAddress}</div>
        { <div className={styles.distance}>{distance > 0 && distance < 100000 ? ((distance) / 1000).toFixed(1) : (distance >= 100000 ? '>100' : '--')}km</div>}
      </div>
    </div>
  )
}

export default CinemaCard